<template>
  <div class="stats-cards">
    <div class="stat-card" v-for="item in stats" :key="item.title">
      <div class="stat-title">{{ item.title }}</div>
      <div class="stat-value">{{ item.value }}<span class="stat-unit">{{ item.unit }}</span></div>
      <div v-if="item.goal" class="stat-goal">目标: {{ item.goal }}{{ item.unit }}</div>
      <div v-if="item.goal" class="stat-progress">
        <div class="progress-bar">
          <div class="progress-inner" :style="{width: (item.value/item.goal*100)+'%'}"></div>
        </div>
        <span class="progress-percent">{{ Math.round(item.value/item.goal*100) }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  distance: { type: Number, default: 0 }, // 单位：米
  calories: { type: Number, default: 0 },
  duration: { type: Number, default: 0 }, // 单位：秒
  heartRate: { type: Number, default: 0 }
})

const stats = computed(() => [
  { title: '运动距离', value: (props.distance / 1000).toFixed(2), unit: 'km', goal: 5 },
  { title: '消耗卡路里', value: Math.round(props.calories), unit: 'kcal', goal: 2000 },
  { title: '运动时长', value: Math.floor(props.duration / 60), unit: '分钟', goal: 30 },
  { title: '平均心率', value: Math.round(props.heartRate), unit: 'bpm', goal: null },
])

</script>

<style scoped>
.stats-cards {
  display: flex;
  gap: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(114,46,209,0.08);
  padding: 20px 28px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stat-title {
  color: #722ed1;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}
.stat-unit {
  font-size: 16px;
  margin-left: 2px;
}
.stat-goal {
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}
.stat-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar {
  flex: 1;
  height: 8px;
  background: #f3e6ff;
  border-radius: 4px;
  overflow: hidden;
}
.progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
  border-radius: 4px;
  transition: width 0.3s;
}
.progress-percent {
  font-size: 12px;
  color: #722ed1;
  min-width: 32px;
  text-align: right;
}
</style> 